<template>
  <el-row class="row" style="max-height: 100vh">
    <el-col :lg="16" class="log-left">
      <div>
        <div class="left-title">欢迎回来</div>
        <div class="left-btitle">基于vue2+element-ui的分享面经的网站</div>
      </div>
    </el-col>
    <el-col :lg="8" class="log-right">
      <div class="form-content">
        <div class="title">登录到您的账户</div>
        <el-divider id="divi">账号密码登录</el-divider>
        <el-form
          :model="formData"
          :rules="rules"
          class="right-form"
          status-icon
        >
          <el-form-item prop="username">
            <el-input
              v-model="formData.username"
              placeholder="请输入用户名"
              prefix-icon="el-icon-user-solid"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="formData.password"
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="login-btn" @click="onSubmit"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import router from "../router";

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码1"));
      } else if (value.length > 18 || value.length < 6) {
        callback("密码长度应为6-18位");
      } else if (!/[a-zA-Z]/.test(value)) {
        callback("密码应包含大小写字母");
      }
      callback();
    };
    return {
      formData: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
      router.push({ name: "index" });
    },
  },
};
</script>

<style scoped>
.row {
  height: 100%;
  background-color: #409eff;
}
.log-left,
.log-right {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.log-left .left-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 0.5rem;
}
.log-left .left-btitle {
  color: #fff;
  font-size: 0.8rem;
}
.log-right {
  flex-direction: column;
  background-color: #fff;
}
.right-form,
.right-form .login-btn {
  width: 250px;
}
.form-content .title {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.log-right .form-content #divi {
  color: #dcdfe6;
  margin-bottom: 2rem;
}
</style>>